<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        插槽分为 匿名插槽 具名插槽 作用域插槽
     -->
     <div id="app">
        <com>
            <!-- <div>
                你是个麻瓜
                <p>德玛西亚</p>
            </div> -->
            <!-- <div>诺克萨斯</div> -->
            <!-- v-slot:可以缩写为一个# -->
            <!-- <template #second>
            </template> -->
            <!-- <div></div> -->
            <template v-slot:first="data">
                <div>
                    {{data.a}}
                </div>
            </template>
        </com>
     </div>
    <script src="../js/vue.js"></script>
    <script>
        const com = {
            data() {
                return {
                    user: {
                        name: '李狗蛋',
                        age: 15
                    }
                }
            },
            template: `
                <div>
                    <slot name="first" :user="user" a="123" b="234"></slot>
                    德玛西亚
                </div>
            `
        }
        Vue.component('com', com)
        new Vue({
            el: "#app"
        })
    </script>
</body>
</html>